<script setup>
import { getPolicyList } from "@/api/policy";
import { ref } from "vue";
import { getProductImageList } from "@/api/productImage";
import { getProductListOnSale } from "@/api/product";

const farmProductsDetail = ref([]);
const informationDetail = ref([]);

// 存储扶贫政策列表（保持原有逻辑不变）
const policyList = ref([]);

// 扶贫政策列表参数（保持原有配置不变）
const params = ref({
  current: 1,
  size: 6,
  keyword: "",
});

const productList = ref([]);
// 获取商品图片列表
const productImageList = ref([]);

// 获取扶贫政策列表（保持原有请求逻辑不变）
const getPolicyListData = async () => {
  const res = await getPolicyList(params.value);
  policyList.value = res.data.data.data;
};
getPolicyListData();

// 获取商品列表（逻辑不变）
const getList = async () => {
  const res = await getProductListOnSale(params.value);
  productList.value = res.data.data.data;

  productImageList.value = new Array(productList.value.length).fill([]);

  const imagePromises = productList.value.map((item) =>
    getProductImageList(item.productId)
  );
  const imageResults = await Promise.all(imagePromises);
  imageResults.forEach((imgRes, idx) => {
    productImageList.value[idx] = imgRes.data?.data || [];
  });
};
getList();
</script>

<template>
  <div class="home">
    <!-- 轮播图：补充alt属性优化可访问性，调整容器间距 -->
    <div class="block text-center mt-4 mb-6">
      <el-carousel trigger="click" height="420px">
        <el-carousel-item v-for="item in 2" :key="item">
          <el-image
            style="width: 100%; height: 100%"
            :src="`http://127.0.0.1:9005/rural-aid-farmer-bucket/lbt/1_${item}.jpg`"
            fit="cover"
            alt="扶贫宣传轮播图"
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 资讯消息：优化标题层级，调整布局间距，补充响应式适配 -->
    <div class="info-section mb-8 px-2">
      <!-- 资讯标题：增加视觉分隔线，提升层级感 -->
      <div class="section-title mb-4">
        <span class="title-text">资讯消息</span>
        <div class="title-line"></div>
      </div>

      <el-row class="info-row">
        <!-- 资讯轮播图：保持原有数据源，优化容器样式 -->
        <el-col :span="12" :xs="24" class="info-carousel-col">
          <div class="info-carousel-wrapper">
            <el-carousel trigger="click" height="300px">
              <el-carousel-item v-for="item in 2" :key="item">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="`http://127.0.0.1:9005/rural-aid-farmer-bucket/lbt/2_${item}.webp`"
                  fit="cover"
                  alt="资讯详情图片"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>

        <!-- 扶贫政策：优化标题布局，修复序号显示问题 -->
        <el-col :span="11" :xs="24" :offset="1" class="policy-col">
          <div class="policy-header mb-3">
            <span class="policy-title-text">扶贫政策</span>
          </div>
          <ul class="policy-list">
            <li
              v-for="(policy, index) in policyList"
              :key="policy.policyId"
              class="policy-item"
              @click="informationDetail.handleOpen(policy)"
            >
              <a href="#" :title="policy.title" class="policy-link">{{
                policy.title
              }}</a>
              <span class="time">{{ policy.publishTime }}</span>
            </li>
            <!-- 空状态提示：避免列表无数据时布局错乱 -->
            <li v-if="policyList.length === 0" class="empty-policy">
              <span class="empty-text">暂无扶贫政策数据</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>

    <!-- 热门农产品：保持原有空容器结构，仅优化基础样式 -->
    <div class="products-section mb-8 px-2">
      <div class="section-title mb-4">
        <span class="title-text">热门农产品</span>
        <div class="title-line"></div>
      </div>
      <!-- 保持原有空容器，避免新增不存在的内容 -->

      <div class="products-placeholder">
        <div
          v-for="(product, index) in productList"
          :key="product.productId"
          @click="farmProductsDetail.handleOpen(product)"
        >
          <ProductCard
            :url="productImageList[index][0]?.imageUrl || ''"
            :productName="product.productName"
            :price="product.price"
          />
        </div>
      </div>
    </div>
  </div>
  <FarmProductsDetail ref="farmProductsDetail" />
  <InformationDetail ref="informationDetail"></InformationDetail>
</template>

<style lang="scss" scoped>
// 全局基础样式：统一间距和字体
$base-color: #333;
$primary-color: #2d8cf0;
$light-gray: #eee;
$text-gray: #999;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;

.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $spacing-md;
}

// 轮播图容器：优化响应式显示
.block {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

//  section标题样式：统一视觉风格
.section-title {
  display: flex;
  align-items: center;
  margin: 30px 0;
  .title-text {
    color: rgb(121, 187, 255);
    font-size: 18px;
    font-weight: 600;
    padding-right: $spacing-sm;
  }
  .title-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, $primary-color, transparent);
  }
}

// 资讯区域布局：优化响应式适配
.info-row {
  width: 100%;
  .info-carousel-col,
  .policy-col {
    height: 300px;
    @media (max-width: 768px) {
      height: auto;
      margin-bottom: $spacing-md;
    }
  }
  .info-carousel-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }
}

// 扶贫政策列表：优化视觉和交互
.policy-header {
  margin-bottom: 8px;
  .policy-title-text {
    font-size: 16px;
    font-weight: 500;
    color: $base-color;
  }
}

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  height: calc(100% - 24px);
  overflow-y: auto;
  // 滚动条美化
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }

  .policy-item {
    padding: 12px 12px;
    border-bottom: 1px dashed $light-gray;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
    // 悬停效果优化
    &:hover {
      background-color: rgba(45, 140, 240, 0.03);
    }

    .index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      background: $primary-color;
      color: white;
      border-radius: 50%;
      margin-right: $spacing-sm;
      font-size: 12px;
    }

    .policy-link {
      flex: 1;
      text-decoration: none;
      color: $base-color;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      transition: color 0.2s ease;
      &:hover {
        color: $primary-color;
        text-decoration: underline;
      }
    }

    .time {
      font-size: 12px;
      color: $text-gray;
      margin-left: $spacing-sm;
      white-space: nowrap;
    }
  }

  // 空状态样式：提升无数据时的用户体验
  .empty-policy {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .empty-text {
      font-size: 14px;
      color: $text-gray;
    }
  }
}

// 热门农产品占位样式：保持布局统一
.products-section {
  .products-placeholder {
    display: grid;
    grid-template-columns: repeat(6, minmax(80px, 200px));
    gap: 10px;
    width: 100%;
  }
}

// 响应式适配：优化移动端显示
@media (max-width: 768px) {
  .block {
    height: auto;
    el-carousel {
      height: 220px !important;
    }
  }
  .info-carousel-wrapper {
    height: 200px !important;
  }
  .policy-list {
    height: 200px;
  }
}
</style>
